{extend name="base" /}
{block name="body"}
<table class="layui-hide" id="ID-treeTable-demo"></table>
<script type="text/html" id="TPL-treeTable-demo">
  <div class="layui-btn-container">
    <button class="layui-btn layui-btn-sm" lay-event="getChecked">获取选中数据</button>
  </div>
</script>

<!-- 表格操作列 -->
<script type="text/html" id="tableBarAuth">
    <a class="layui-btn layui-btn-sm ajax-iframe" href="{:url('navbar/add')}?pid={{d.id}}" data-width="400px" data-height="450px">添加子菜单</a>
    <a class="layui-btn layui-btn-sm ajax-iframe" href="{:url('navbar/edit')}?id={{d.id}}" data-width="400px" data-height="450px"><i class="layui-icon layui-icon-edit"></i>修改</a>
    <a class="layui-btn layui-btn-danger layui-btn-sm ajax-delete" href="{:url('navbar/del')}?id={{d.id}}" tiptext="确认删除ID{{d.id}}"><i class="layui-icon layui-icon-delete"></i>删除</a>
</script>
<!-- 权限列 -->
<script type="text/html" id="checkboxTpl">
  <!-- 这里的 checked 的状态只是演示 -->
  <input type="checkbox" name="status" id="{{d.id}}" value="{{d.username}}"  lay-skin="tag" title="锁定" lay-filter="lockDemo" {{ d.status == 1 ? 'checked' : '' }}>
</script>
  

{/block}
{block name="js"}
<script>
layui.use(function(){
  var treeTable = layui.treeTable;
  var layer = layui.layer;
  var dropdown = layui.dropdown;
  // 渲染
  var inst = treeTable.render({
    elem: '#ID-treeTable-demo',
    url: "{:url('navbar/index_json')}", // 此处为静态模拟数据，实际使用时需换成真实接口
    
    tree: {
        customName:{name:"cat_name",id:"id",pid:"pid"},
        data:{isSimpleData:true},
    },

    size:'lg',even:true,
    maxHeight: '501px',
    toolbar: '#TPL-treeTable-demo',
    cols: [[
                
      {type: 'checkbox', fixed: 'left'},
      {field: 'id', title: 'ID', width: 80, sort: true, fixed: 'left'}
      , {
                    field: 'cat_name', 
                    title: '栏目名称', 
                    align: 'left', 
                    width: 140
                }
                , {
                    field: 'column', 
                    title: '模板', 
                    align: 'center', 
                    width: 180,
                    templet:function (d) {
                    var load = d.column==1 ? '-red">瀑布模板' : (d.column==2 ? '-green">游戏模板' : (d.column==3 ? '-green">宫格图片' : '">下载模板'));
                    return '<span class="layui-btn layui-btn-primary layui-btn-xs layui-border' + load + '</span>';
                    }
                }, {
                    field: 'weigh', 
                    title: '排序', 
                    align: 'center', 
                    width: 80
                }, {
                    field: 'create_time', 
                    title: '创建时间', 
                    align: 'center', 
                    width: 180
                }, { 
                    field:'status',
                    align: 'center', 
                    sort: true, 
                    title: '状态',
                    templet:'#checkboxTpl', 
                    width:100
                }, {
                    templet: '#tableBarAuth', 
                    title: '操作', 
                    align: 'center', 
                    width: 310
                }
             ]],
    page: false,
  });// 展开或关闭全部节点
treeTable.expandAll('ID-treeTable-demo', false); // 关闭全部节点

  // 表头工具栏工具事件
  treeTable.on("toolbar(ID-treeTable-demo)", function (obj) {
    var config = obj.config;
    var tableId = config.id;
    var status = treeTable.checkStatus(tableId);
    // 获取选中行
    if (obj.event === "getChecked") {
      if(!status.data.length) return layer.msg('无选中数据');
      console.log(status);
      layer.alert("当前数据选中已经输出到控制台，<br>您可按 F12 从控制台中查看结果。");
    }
  });
    //监听锁定操作
  form.on('checkbox(lockDemo)', function(obj){
    layer.tips(this.title + ' ' + this.value + '：'+ obj.elem.checked, obj.othis);
    var load = layer.load(1, {time: 3*1000}); //加载动画  
    // 参数
    var obj = {};
    obj[$(this).attr('name')] = this.checked == true ? 1 : 0;
    obj['_verify'] = 0;
    $.ajax({
        url: "{:url('navbar/edit')}?id="+ this.id,
        type: 'post',
        dataType: 'json',
        data: obj,
            success:function(res){
                    if(res.code == 0){
                    layer.msg('操作成功');
                     setTimeout(function () {
                     parent.location.reload();
                }, 1000);
                    }else{
                    layer.msg('操作失败');
                    }
                },
        error: function (xhr, state, errorThrown) {
            layer.close(index);
            layer.msg(state + '：' + errorThrown, {icon: 2});
        }
    });
  });
  // 
});
</script>
 
{/block}